const path = require("path");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const webpack = require("webpack");

module.exports = {
  entry: {
    index: "./src/index.tsx",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/", // 确保文件资源能够正确地 serve 在 http://localhost:3000 下
  },
  plugins: [
    // 对于 CleanWebpackPlugin 的 v2 versions 以下版本，使用 new CleanWebpackPlugin(['dist/*'])
    new CleanWebpackPlugin({cleanStaleWebpackAssets: false}), //  watch 触发增量构建后不删除 index.html 文件
    new HtmlWebpackPlugin({
      title: "管理输出",
      template: './index.html', //默认index.html位置
    }),
    // Shimming 预置全局变量
    // new webpack.ProvidePlugin({
    //   _: "lodash",
    // }),
  ],
  // externals: {
  //   "react": "react",
  //   "react-dom": "ReactDOM"
  // },
  resolve: {
    //下面后缀的文件导入时可以省略文件名，js必须要有，否则会react.js文件会无法被解析
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  module: {
    rules: [
      {
        // 解析jsx文件类型
        test: /\.jsx?$/,
        //
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/env", "@babel/react"]
          }
        }
      },
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      {
        test: /\.ts(x?)$/,
        include: path.resolve(__dirname, "src"),
        // exclude: /node_modules/,//不解析node_modules
        use: ["ts-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        include: path.resolve(__dirname, "src"),
        use: [
          "file-loader",
          {
            loader: "image-webpack-loader", // 压缩优化图片
            options: {
              bypassOnDebug: true, // webpack@1.x
              disable: true, // webpack@2.x and newer
            },
          },
        ],
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, "src"),
        // use: [MiniCssExtractPlugin.loader, "css-loader"],
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        // include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                strictMath: true,
                modifyVars: {
                  'primary-color': '#1DA57A',
                  'link-color': '#1DA57A',
                  'border-radius-base': '2px',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  }
  // optimization: {
  //   // optimization.minimizer: 覆盖 webpack 默认提供的优化器 压缩css
  //   minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  //   // 分离公共依赖
  //   splitChunks: {
  //     chunks: "async",
  //     cacheGroups: {
  //       vendor: {
  //         test: /[\\/]node_modules[\\/]/,
  //         name: "vendors",
  //         chunks: "all",
  //       },
  //     },
  //   },
  //   // 将 runtime 代码拆分为一个单独的 chunk
  //   runtimeChunk: "single",
  //   // 前后两次构建，vendor hash 保持一致
  //   moduleIds: "hashed",
  // },
};
